<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>所有虎客刷题系统-学生</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <style>
        table th {
            background-color: lightcyan;
        }
        table td {
            background-color: lightgrey;
        }
    </style>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>

<%--<p>
    欢迎管理员 <%=request.getParameter("login")%>
</p>--%>
<h1>所有用户</h1>
<a href="adduser.jsp">新用户注册</a>

<p align="center">
<form action="search.role" id="searchForm">
    <input type="hidden" name="pageNo" value="${p.page}"/>
    <input type="search" name="rolename" value="${rolename}" placeholder="请输入用户名"/>
    <input type="submit" value="搜索" id="search"/>
</form>
</p>

<table width="70%" id="dataTable" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <th>编号</th>
        <th>rolename</th>
        <th>rolecode</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${p.data}" var="q">
        <tr>
            <td>${q.id}</td>
            <td>${q.rolename}</td>
            <td>${q.rolecode}</td>
            <td><a onclick="return confirm('真的要删除?')" href="del.ques?id=${q.id}">删除</a>
                <a href="toUpdate.ques?id=${q.id}">修改</a>
                <a href="show.ques?id=${q.id}">查看</a>
            </td>
        </tr>
    </c:forEach>
</table>
<p align="center" id="pager">
    <a href="#" data-id="1">首页</a>

    <c:if test="${p.page>1}">
        <a href="#" data-id="${p.page-1}">上一页</a>
    </c:if>
    <input type="number" min="1" value="${p.page}" name="pageNo" style="width: 50px"/>/${p.pageNums}
    <button type="button" id="goto">直达</button>

    <c:if test="${p.page<p.pageNums}">
        <a href="#>" data-id="${p.page+1}">下一页</a>
    </c:if>

    <a href="#" data-id="${p.pageNums}">尾页</a>
</p>
<script>

    $(function () {
        $("#search").click(function () {
            $("#searchForm input[name=pageNo]").val(1);
        });
        $("#goto").click(function () {
            $("#searchForm input[name=pageNo]").val($(this).prev().val());
            $("#searchForm").submit();
        });
        $("#pager a").click(function () {
            //this是表示当前元素，是Dom元素
            let n = $(this).data("id");
            //$(this).prop("data-id");
            //alert(n);
            $("#searchForm input[name=pageNo]").val(n);
            $("#searchForm").submit();
            return false;
        });
    });
</script>
</body>
</html>
